<template>
  <div class="app-container" style="height: 100vh; display: flex; flex-direction: column;">
      <el-container>
          <el-aside width="200px" style="height: 100vh;">
              <!-- logo -->
              <div class="menu-header" style="text-align: center; padding: 10px 0;">
                  <img src="./img/CgJjZ2Y5zqiAbefUAAAomK2iBFk273.png" style="max-width: 100%; height: auto;">
              </div>
              <!-- 菜单 -->
              <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#fff" text-color="#333" active-text-color="#409EFF" :collapse="false" @open="handleOpen" @close="handleClose">
                  <template v-for="(route, index) in filteredRoutes" :key="index">
                      <el-sub-menu v-if="route.children" :index="route.path">
                          <template #title>
                              <!-- <el-icon><component :is="route.meta.icon ? route.meta.icon : 'el-icon-menu'"/></el-icon> -->
                              <span style="margin-left: 10px;">{{ route.name }}</span>
                          </template>
                          <el-menu-item v-for="subRoute in route.children" :key="subRoute.path" :index="subRoute.path" @click="navigateTo(subRoute.path)">{{ subRoute.name }}</el-menu-item>
                      </el-sub-menu>
                      <el-menu-item v-else :index="route.path" @click="navigateTo(route.path)">{{ route.name }}</el-menu-item>
                  </template>
              </el-menu>
          </el-aside>
          <el-container style="height: 100%;">
              <!-- Header -->
              <header class="app-header" style="background-color: #F9FAFC; display: flex; align-items: center; justify-content: center; height: 60px;">
  
              </header>
              <!-- Main -->
              <el-main style="height: calc(100% - 60px); overflow-y: auto;">
                  <router-view></router-view>
              </el-main>
              <!-- Footer -->
              <el-footer style="height: 60px; display: flex; align-items: center; justify-content: center;">Build Version: 1.0.0</el-footer>
          </el-container>
      </el-container>
  </div>
  </template>
  
  <script>
  export default {
      name: "App",
      computed: {
          filteredRoutes() {
              return this.$router.options.routes;
          }
      },
      methods: {
          navigateTo(path) {
              this.$router.push(path);
          },
          handleOpen(key, keyPath) {
              console.log('Submenu opened:', key, keyPath);
          },
          handleClose(key, keyPath) {
              console.log('Submenu closed:', key, keyPath);
          }
      }
  }
  </script>
  